<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		<div id="app">
			请输入数值: <input type="text"  v-model="num" />
			
			
			<!--数值转化-->
			请输入数据:<input  type="text"  v-model.trim="numberValue"/>
			
			
			<span>长度为{{length}}</span>
			
			<button  @click="jisuan">计算</button>
			
			<hr />
			<input type="text"  v-model.lazy="msg"/>{{msg}}
			
			<hr />
			<!--属性计算  将字符串反转-->
			计算:<input  type="text"  v-model="value" /><br />
			
			
			<!--计算属性-->
			{{reverseStr}}
			{{reverseStr}}
			<!--计算方法-->
			{{reverseA()}}
			{{reverseA()}}
			
			
			
			
		</div>
		
		
		<script src="../js/vue.js"></script>
		
		<script>
			const  app=new Vue({
				el: "#app",
				data: {
					num: '',
					numberValue: '',
					length: 0,
					msg: '',
					value: ''
				},
				methods: {
					addNum(){
						this.num=window.parseInt(this.num)+20;
					},
					jisuan(){
						this.length=this.numberValue.length;
					},
					reverseA(){
						console.log("计算方法")
						return  this.value.split('').reverse().join('');
					}
					
				},
				computed: {
					reverseStr(){
						console.log("计算属性");
					      return  this.value.split('').reverse().join('');
					}
				}
				
			})
			
			
		</script>
		
	</body>
	
	
</html>
